<template>
    <div>
        <div style="margin-top: 15px;">
            <el-row>
                <el-input placeholder="请输入清单中客户姓名" v-model="search.cName" class="input-with-select">
                    <el-button slot="append" icon="el-icon-search" @click="findData"></el-button>
                </el-input>
            </el-row>
        </div>

        <el-table
                :data="tableData.list"
                border
                style="width: 100%">
            <el-table-column
                    prop="payoffId"
                    label="编号"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="personPay"
                    label="人工费"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="matiPay"
                    label="材料费"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="partPay"
                    label="成本费"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="note"
                    label="注意事项"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="mainPermit"
                    label="保修承若"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="estimate"
                    label="估价"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="startTime"
                    label="开始时间"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="cName"
                    label="客户姓名"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="total"
                    label="总额"
                    width="200">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="160">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="middle">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                style="margin: 5px 45%"
                background
                layout="prev, pager, next"
                :total="tableData.total"
                :current-page="this.queryParams.pageNo"
                :page-size="this.queryParams.pageSize"
                @current-change="changePageNo">
        </el-pagination>
    </div>
</template>


<script>
    import showPayoff from '@/views/supervision/show_payoff.vue'
    import {getData as get} from '../../api/supervision'

    export default {
        //inject: ['reload'],
        //name: "",
        data() {
            return {
                search: {
                    cName: "",
                },
                queryParams: {
                    pageNo: 1,
                    pageSize: 10,
                    cName: "",
                },
                tableData: {},
                userData:{}
            }
        },
        created() {
            let param = new URLSearchParams();
            param.append('pageNo', '1');
            param.append('pageSize', '10');
            this.getData(param);
        },
        watch: {
            queryParams: {
                handler: function () {
                    let param = new URLSearchParams();
                    param.append('pageNo',this.queryParams.pageNo);
                    param.append('pageSize',this.queryParams.pageSize);
                    param.append('cName',this.queryParams.cName);

                    this.getData(param);
                },
                deep: true
            }
        },
        mounted() {
        },
        methods: {
            //获取列表数据
            getData(param) {
                //【注意】必须使用这种方式传递参数，否则后台参数无法接收到
                // 具体原因请看https://blog.csdn.net/csdn_yudong/article/details/79668655
                let that = this;
                // 执行方法
                get(param).then(r=>{
                    console.log(r);
                    that.tableData = r;
                }).catch(_=>{
                    console.log(_);
                })
            },

            changePageNo(i) {
                this.queryParams.pageNo = i;
            },
            findData() {
                console.log("查询");
                this.queryParams.pageNo = 1;
                this.queryParams.cName = this.search.cName;
            },
            edit(row) {
                let that = this;
                this.$layer.iframe({
                    content: {
                        content: showPayoff, //传递的组件对象
                        parent: this,//当前的vue对象
                        data: {serviceId:row.serviceId}//props
                    },
                    area: ['400px', '500px'],
                    title: '结算清单',
                    shade: true,
                    shadeClose: false,
                    cancel(){
                        console.log("关闭")
                        let param = new URLSearchParams();
                        param.append('pageNo', '1');
                        param.append('pageSize', '10');
                        that.getData(param);
                    }
                });
            },
        }
    }
</script>

<style>
    .cell{
        text-align: center!important;
    }
</style>